<template>
	<view>
		<cu-custom :bgLinerBorder="true" :isBlack="false">
			<block slot="content">抵用券</block>
		</cu-custom>
		<view class="contents">
			<view class="voucher-item flex m-b-10" v-for="(item,index) in list" :key="index">
				<view class="voucher-left orange">
					<view class="f-12">
						抵扣
					</view>
					<view class="f-22 fontBold">
						100
					</view>
					<view class="f-12">
						({{item.discount}}%)
					</view>
				</view>
				<view class="voucher-right flex-1">
					<view class="fontBold">
						{{item.name}}
					</view>
					<view class="flex justify-space-between align-center">
						<view class="f-12 m-r-10">
							{{item.limited==2?'无限期':`${item.end_time} 前`}}
						</view>
						<!--  `is_use` tinyint(1) DEFAULT '1' COMMENT '1待使用 2已使用 3已过期 -1删除', -->
						<view class="voucher-btn" v-if="item.is_use == 1" @click="toUse(item)">
							去使用
						</view>
						<!-- <view class="voucher-btn" :class="[item.is_use==2?'voucher-btn2':'']" v-if="nowTime < item.times" @click="toUse(item)">
							{{item.is_use==2?'已使用':'去使用'}}
						</view> -->
						<view class="voucher-btn voucher-btn2" v-if="item.is_use == 2" >
							已使用
						</view>
						<view class="voucher-btn voucher-btn2" v-if="item.is_use == 3" >
							已过期
						</view>
					</view>
					<view class="f-12 black-9">
						特殊品类可用
					</view>
					
				</view>
			</view>
		</view>
		<view class="nodata" v-if="list.length == 0">
			暂无数据~
		</view>
		<view style="height: 130rpx;"></view>
		<view class="bottom-wrap flex justify-space-around">
			<view class="bottom-btn bottom-btn2" @click="sub()">
				返回
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad(option) {
			this.getInfo();
		},
		computed:{
			nowTime(){
				return new Date().getTime();
			}
		},
		methods: {
			sub(){
				uni.navigateBack();
			},
			getInfo(){
				let data = {
					is_use:1
				}
				this.$http('/apicloud/User/userCoupon',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.list = datas;
						// this.list.forEach(item=>{
						// 	item.times = item.end_time?this.$util.timeToTimestamp(item.end_time):'';
						// })
					}
				})
			},
			toUse(item){
				if(item.is_use==1){
					uni.switchTab({
						url:'/pages/tabbar/index'
					})
				};
			},
		}
	}
</script>

<style lang="less">
	.voucher-item{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
		border-radius: 16rpx;
		margin-right: 30rpx;
		
		.voucher-left{
			background: #FFE7DC;
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-radius: 16rpx 0 0 16rpx;
		}
		.voucher-right{
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 0 16rpx 16rpx 0;
			.voucher-btn{
				width: 130rpx;
				height: 60rpx;
				background: #FF5200;
				border-radius: 30px;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.voucher-btn2{
				background: #666666;
			}
		}
	}
	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 30rpx 0 30rpx;
	
		.bottom-btn {
			width: 100%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}
	
	
		.bottom-btn2 {
			background: #FF5200;
		}
	}
</style>
